<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app";
import { shortenString, toast } from "@/utils/tools";
import { computed, ref } from "vue";
import { dictType, sendGoods } from "@/apis/order";

const orderId = ref(0);
const detail = ref({}) as any;
const columns = ref([]) as any;
const pickerRef = ref();

const getDictType = async () => {
  let res = await dictType();
  if (res.code === 200) {
    columns.value = [res.data];
  }
};

const handleSendGoods = async () => {
  const data = {
    shoppingId: orderId.value,
    expressDelivery: detail.value.expressDelivery, // 快递公司名称
    expressDeliveryId: detail.value.expressDeliveryId, // 快递公司id
    money: detail.value.money, // 运费
    oddNumbers: detail.value.oddNumbers, // 快递单号
  };
  const reg = /^[A-Za-z0-9]+$/
  let regex = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  if(!detail.value.oddNumbers) {
    return toast('请填写快递单号')
  }
  if(!reg.test(detail.value.oddNumbers)) {
    return toast('请填写正确的快递单号')
  }
  if(!detail.value.money) {
    return toast('请填写运费')
  }
  if(!regex.test(detail.value.money)) {
    return toast('请填写正确的运费')
  }
  const res = await sendGoods(data);
  if (res.code === 200) {
    uni.navigateBack({ delta: 1 });
  }
  toast(res.msg);
};

const openPicker = () => {
  pickerRef.value.open();
};

const confirm = (e) => {
  detail.value.expressDelivery = e.value[0].dictLabel;
  detail.value.expressDeliveryId = e.value[0].dictValue;
};

onShow(() => {
  getDictType();
});
onLoad((options: any) => {
  orderId.value = options.id;
});
</script>
<template>
  <view class="container">
    <view class="l-card">
      <view class="flex flex-center wapper-sss">
        <view class="empty" @click="openPicker"></view>
        <text>快递公司：</text>
        <uv-input
          placeholder="请选择"
          suffixIcon="arrow-down"
          border="none"
          suffixIconStyle="color: #909399"
          :readonly="true"
          v-model="detail.expressDelivery"
          @click="openPicker"
        ></uv-input>
      </view>
      <view class="order-details-line"> <uv-line /></view>
      <view class="flex flex-center">
        <text>快递单号：</text>
        <uv-input
          placeholder="请输入单号"
          v-model="detail.oddNumbers"
          border="none"
        ></uv-input>
      </view>
      <view class="order-details-line"> <uv-line /></view>

      <view class="flex flex-center">
        <text>快递金额：</text>
        <uv-input placeholder="请输入金额" border="none" v-model="detail.money">
          <!-- vue3模式下必须使用v-slot:suffix -->
          <template v-slot:suffix>
            <view class="expree-price-suff">(单位/元)</view>
          </template>
        </uv-input>
      </view>
    </view>
    <view class="btn flex flex-center">
      <button class="sell-btn flex flex-center" @click="handleSendGoods">
        立即发货
      </button>
    </view>

    <uv-picker
      ref="pickerRef"
      :columns="columns"
      keyName="dictLabel"
      @confirm="confirm"
    ></uv-picker>
  </view>
</template>
<style scoped lang="scss">
.l-card {
  padding: 20rpx;
}

.container {
  padding: 20rpx;
}

.expree-price-suff {
  color: #9a9a9a;
  font-size: 24rpx;
}

.btn {
  margin-top: 300rpx;
  width: 100%;
}

.sell-btn {
  background: linear-gradient( 90deg, #F35034 0%, #C7452F 100%);
  border-radius: 50rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #FFFFFF;
  width: 600rpx;
  height: 100rpx;
  text-align: center;
}

.wapper-sss {
  position: relative;
}

.empty {
  position: absolute;
  top: 0;
  width: 100%;
  float: left;
  height: 50rpx;
  background: red;
  z-index: 999;
  opacity: 0;
}
</style>